<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 100%;height:100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import DrllDownJson from '@/assets/views/pratice/DrllDown.json'

export default {
  mounted () {
    // 初始化图表
    this.initChart();
    // 绑定下钻
    this.onDrillDown();
  },
  data () {
    return {
      myChart: null
    }
  },
  methods: {
    initChart () {
      let dimensions = ['brand', 'sale'];
      let dataset = [];
      for (let brandBucket of DrllDownJson) {
        dataset.push([brandBucket.key, brandBucket.saleTotal.value])
      }
      // 渲染
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);

      var option = {
        dataset: [{
          dimensions: dimensions,
          source: dataset
        }],
        xAxis: {
          type: 'category'
        },
        yAxis: {
        },
        series: [{
          type: 'bar',
          barWidth: '20%'
        }],
        tooltip: {
          trigger: 'axis',
        },
        toolbox: {
          left: '80%',
          feature: {
            myTool: {
              show: true,
              title: '下钻返回',
              icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
              onclick: () => {
                let dimensions = ['brand', 'sale'];
                let dataset = [];
                for (let brandBucket of DrllDownJson) {
                  dataset.push([brandBucket.key, brandBucket.saleTotal.value])
                }
                this.myChart.setOption({
                  dataset: [{
                    dimensions: dimensions,
                    source: dataset
                  }]
                })
              }
            }
          }
        }
      };
      option && myChart.setOption(option);
      // 监听图表容器的大小并改变图表大小
      window.onresize = function () {
        myChart.resize();
      };
      this.myChart = myChart;
    },
    onDrillDown () {
      // 监听点击时间
      this.myChart.on('click', (params) => {
        let brandDataArr = DrllDownJson.filter(item => item.key == params.name);
        if (!brandDataArr || brandDataArr.length == 0) {
          return;
        }
        let brandData = brandDataArr[0];
        console.log("brandData", brandData)
        // 组装dataset
        let dimensions = ['颜色', '销量'];
        let dataset = [];
        for (let colorBucket of brandData.color.buckets) {
          dataset.push([colorBucket.key, colorBucket.saleTotal.value])
        }
        this.myChart.setOption({
          dataset: [{
            dimensions: dimensions,
            source: dataset
          }]
        })

      });
    }
  }
}
</script>

<style>
</style>